<template>
	<div id="main_container">
		<div id="search_container">
			<div id="search_wrapper" class="vertical">
				<input type="number"
				maxlength="11"
				placeholder="请输入手机号搜索…"
				v-model="phone"
				@enter="search">
				<div id="search_clear"
				v-show="phone.length"
				@click="phone=''"></div>
			</div>
			<div id="search_btn" class="vertical"
			@click="search">
			</div>
		</div>
		<div id="item_container">
			<div class="item"
			v-for="item in items"
			v-if="items.length"
			@click="clickItem(item)">
				<div class="fl">
					<p class="txt1">{{item.mobile}}</p>
					<p class="txt2">{{item.time}}</p>
				</div>
				<div class="fr">
					<p class="txt3">￥{{item.price}}</p>
					<p :class="{txt4:item.status===1, txt5:item.status===2, txt6:item.status===3 || item.status===4}">{{status[item.status-1]}}</p>
				</div>
			</div>
			<!-- 缺省 -->
			<div class="c-empty" v-if="!items.length">
				<p>暂无交易记录</p>
			</div>
		</div>
		<!-- 詳細彈框 -->
		<pop :pop="pop">
			<p class="pop-line">订单号码：{{activeItem.number}}</p>
			<p class="pop-line">发起时间：{{activeItem.time}}</p>
			<p class="pop-line">手机号码：{{activeItem.mobile}}</p>
			<p class="pop-line">办理产品：{{activeItem.title}}</p>
			<p class="pop-line">实付金额：{{activeItem.deal_price}}</p>
			<p class="pop-line">获得积分：{{activeItem.point}}</p>
			<p class="pop-line">大唐账号：{{activeItem.username}}</p>
			<p class="pop-line">订单进度：{{status[activeItem.status-1]}}</p>
			<div class="btn-container"  v-if="activeItem.status == 1">
				<div class="c-btn"
				@click="pop.show = false">关闭</div>
				<div class="c-btn-orange"
				:class="{disabled: !payBtn}"
				@click="pay">付款</div>
			</div>
		</pop>
	</div>
</template>
<script>
	import pop from './Pop'
	import {utcToDate} from '../assets/js/utils.js'
	export default{
		name: 'history',
		data(){
			return{
				phone:'',
				items:[
				],
				activeItem:{
				},
				status:['待付款','待充值','已完成','已退款'],
				pop:{
					show:false,
					style:{
						'boxShadow':'0px 1px 20px 0px rgba(74,73,74,0.21)',
						'borderRadius':'0.32rem',
						'width':'8.08rem',
						'padding':'0.72rem 0.77rem'
					}
				},
				payBtn: true
			}
		},
		mounted(){
			document.getElementById('main_container').style.minHeight = window.innerHeight + 'px';
			document.title = '记录';
		},
		methods:{
			search(){
				this.$http.post('',{
					name:'shopping.sys.getOrders',
					mobile: this.phone
				}).then((response) => {
					response.body.data.forEach((e) => {
						e.status = Number(e.status);
						e.time = utcToDate(e.created_at);
					})
					this.items = response.body.data.reverse();
				})
			},
			clickItem(item){
				this.activeItem  = item;
				this.$http.post('',{
					name:'shopping.sys.orderDetail',
					order_id: item.id
				}).then((response) => {
					let d = response.body.data;
					d.time = utcToDate(d.created_at);
					this.activeItem = d;
					this.pop.show = true;
				})
			},
			pay(){
				this.payBtn = false;
				this.$http.post('',{
					name:'shopping.sys.virtualLogin',
					order_id: this.activeItem.id
				}).then((response) => {
					this.activeItem.order_id = this.activeItem.id;
					this.activeItem.price = this.activeItem.deal_price;
					this.activeItem.tybe = 'b';
					this.pingpay(this.activeItem, () => {
						this.pop.show = false;
						this.search();
						this.payBtn = true;
					}, () => {
						this.payBtn = true;
					});
				})
			}
		},
		components:{pop}
	}
</script>
<style lang='less' scoped>
	#main_container{
		width: 100%;
		background: #f2f2f2;
	}
	#search_container{
		height: 1.17rem;
		background: #fff;
		padding: .1rem .4rem;
		#search_wrapper{
			background: #f2f2f2;
			width: 8.19rem;
			height: 0.85rem;
			border-radius: 0.08rem;
			padding: .1rem 0.27rem;
			position: relative;
			margin-top: .08rem;
			input{
				color: #4a4a4a;
				font-size: 0.37rem;
				border:none;
				background: transparent;
				margin-top: .1rem;
			}
			#search_clear{
				position: absolute;
				top: 0.18rem;
				right: 0.25rem;
				width: 0.51rem;
				height: .51rem;
				float: right;
				background: url(../assets/img/search_close_press@3x.png) no-repeat center;
			}
		}
		#search_btn{
			width: 0.55rem;
			height: 0.6rem;
			background: url(../assets/img/icon_search@3x.png) no-repeat center;
			margin-left: .4rem;
			background-size: contain;
		}
	}
	#item_container{
		margin-top: 0.32rem;
		.item{
			background: #fff;
			padding: 0.24rem .4rem;
			margin-bottom: 0.13rem;
			overflow: hidden;
			.txt1{
				font-size:0.4rem;
				color:#4a4a4a;
				margin-bottom: .35rem;
			}
			.txt2{
				font-size:0.37rem;
				color:#aeaeae;
			}
			.txt3{
				font-size:0.43rem;
				color:#ff891d;
				margin-bottom: .35rem;
			}
			.txt4{
				font-size:0.4rem;
				color:#ff891d;
				float: right;
			}
			.txt5{
				font-size:0.4rem;
				color:#aeaeae;
			}
			.txt6{
				font-size:.4rem;
				color:#d3d3d3;
			}
		}
	}
	.pop-line{
		font-size:0.4rem;
		color:#858585;
		letter-spacing:0.41px;
		line-height:0.43rem;
		text-align:left;
		margin-top: .25rem;
	}
	.btn-container{
		margin: .5rem auto 0;
		display: flex;
		justify-content: space-between;
		width: 5rem;
	}
</style>